<template>
  <div>
    <cart-head :title="$route.name" @onClickRight="onClickRight" />
    <main v-if="items.length === 0">
      <img
        v-cloak
        style="width: 100%"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F9996109318%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643938877&t=72392446f904e2c9150f92bb71d68afd"
        alt=""
      />
    </main>
    <main v-else>
      <div v-for="item in items" :key="item.id">
        <van-swipe-cell>
          <van-card
            @click.stop="setCartItem(!item.selected, item.key)"
            :class="[{ boder: item.selected }]"
            :num="item.number"
            :price="item.price"
            :title="item.name"
            :thumb="item.pic"
          />
        <!-- 默认参数与传参冲突时 用箭头函数保存默认参数，里面函数传参 -->
          <van-stepper @change="(value) => {change(value,item.key)}"  button-size=".5rem" theme="round" class="steep" :default-value="item.number" />
          <van-icon
            :class="[{ icon: item.selected }, { dis: !item.selected }]"
            color="#9ac8ff"
            class-prefix="icon"
            name="guanzhuxuanzhong"
          />
          <template #right>
            <van-button
              class="v-but"
              @click.stop="deleteItem(item.key)"
              square
              type="danger"
              text="删除"
            />
          </template>
        </van-swipe-cell>
      </div>
      <div>
        <van-submit-bar
          :price="price * 100.0"
          button-text="提交订单"
          @submit="onSubmit"
        >
          <van-checkbox @click="allcheck(!allchecked)" :value="allchecked"
            >全选</van-checkbox
          >
        </van-submit-bar>
      </div>
    </main>
    <tabbar />
  </div>
</template>

<script>
import Tabbar from '../../components/Tabbar.vue'
import { mapActions, mapState } from 'vuex'
import { gettoken } from '_utils'
import CartHead from './component/CartHead.vue'
export default {
  data () {
    return {}
  },
  created () {
    // 初始数据
    this.INIT_CART_INFO({
      token: gettoken()
    })
  },
  methods: {
    // 步进器
    change (value, key) {
      this.SET_CART_NUMBER({
        number: value,
        key,
        token: gettoken()
      })
    },
    // 删除选中的
    onClickRight () {
      const keys = []
      this.items.forEach((item) => {
        if (item.selected) {
          keys.push(item.key)
        }
      })
      this.DELETE_CART_ITEM({
        key: keys.join(','),
        token: gettoken()
      })
    },
    // 全选
    allcheck (allchecked) {
      const key = []
      this.items.forEach((item) => key.push(item.key))
      this.SET_CART_ITEM({
        selected: allchecked,
        key: key.join(','),
        token: gettoken()
      })
    },
    // 删除数据
    deleteItem (key) {
      this.DELETE_CART_ITEM({
        key,
        token: gettoken()
      })
    },
    // 修改选中状态
    setCartItem (selected, key) {
      this.SET_CART_ITEM({
        selected,
        key,
        token: gettoken()
      })
    },
    ...mapActions('cart', [
      'INIT_CART_INFO',
      'SET_CART_ITEM',
      'DELETE_CART_ITEM',
      'SET_CART_NUMBER'
    ]),
    onSubmit () {
      this.$router.push('/order')
    }
  },
  computed: {
    ...mapState({
      items: (state) => state.cart.items,
      number: (state) => state.cart.number,
      price: (state) => state.cart.price
    }),
    allchecked () {
      return this.items.every((item) => item.selected)
    }
  },
  components: { Tabbar, CartHead }
}
</script>

<style lang="scss" scoped>
[v-cloak] {
  display: none;
}
.steep {
  position: absolute;
  left: 3rem;
  top: 1.4rem;
}
.dis {
  display: none;
}
.icon {
  position: absolute;
  right: 0.3333rem;
  top: 0.3056rem;
  font-size: 0.75rem;
}
.boder {
  background-color: rgb(233, 244, 250);
}
.v-but {
  height: 100%;
}
.v-chex {
  height: 100%;
}
.van-submit-bar__bar{
  height: 53px;
}
</style>
